<template>
	<view>
		<view class="midTitle ">
			添加银行·安全 快捷 信赖
			<view class="sub">
				此功能应用于车款结算及退税结算
			</view>
		</view>
		<view class="bankForm">
			<u-form :model="form" ref="uForm" label-width="200">
				<u-form-item label="开户行名称" prop="bankName"><u-input v-model="form.bankName" disabled="true"
						type="select" @click="bankModelShow = true" placeholder="请选择银行" /></u-form-item>
				<u-form-item label="支行名称" prop="bankName"><u-input v-model="form.bankBranchName"
						placeholder="请输入支行名称" /></u-form-item>
				<u-form-item label="账户名称" prop="bankName"><u-input v-model="form.accountName"
						placeholder="请输入账户名称" /></u-form-item>
				<u-form-item label="银行账号" prop="bankName"><u-input v-model="form.accountNo"
						placeholder="请输入银行账号" /></u-form-item>
			</u-form>
		</view>
		<u-select v-model="bankModelShow" @confirm="confirmBank" :list="bankList"></u-select>
		<u-button type="success" shape="circle" :custom-style="buttonStyle" @click="submit">确定</u-button>
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	import {
		buttonStyle
	} from "@/utils/buttonStyle.js";
	export default {
		data() {
			return {
				bankModelShow: false,
				buttonStyle,
				form: {},
				bankList: [],
				rules: {
					bankName: [{
						required: true,
						message: '请输入开户行名称',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					bankBranchName: [{
						required: true,
						message: '请输入支行名称',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					accountName: [{
						required: true,
						message: '请输入账户名称',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					accountNo: [{
						required: true,
						message: '请输入银行账号',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			this.getBankList()
		},
		methods: {
			confirmBank(e) {
				this.form.bankId = e[0].value;
				this.form.bankName = e[0].label;
			},
			getBankList() {
				let that = this;
				that.$api.getBankList().then(res => {
					res.result.forEach((item) => {
						that.bankList.push({
							value: item.id,
							label: item.bankName
						})
					})
				})
			},
			submit() {
				let that = this
				that.$refs.uForm.validate(valid => {
					if (valid) {
						let params = that.form;
						that.$api.addBank(params).then(res => {
							uni.showToast({
								title: '操作成功',
								icon: "success",
								duration: 2000,
								success: () => {
									uni.navigateBack({
										delta: 1
									})
								}
							})
						})
					}
				});
			}
		}
	};
</script>

<style scoped lang="less">
	.midTitle {
		padding: 60rpx 0 100rpx;
		text-align: center;
		font-size: 36rpx;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		color: #202020;
		line-height: 50rpx;

		.sub {
			font-size: 24rpx;
			margin-top: 20rpx;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 34rpx;
		}
	}

	.bankForm {
		width: 630rpx;
		margin: 0 auto;
		margin-bottom: 100rpx;
	}
</style>